<template>
  <div class="stage">
    <div class="canvas">
      <div class="welcome">
        <img class="logo" src="@/assets/login/login_logo.png" alt="" />
        欢迎登录BOSS管理平台
      </div>

      <img class="illust" src="@/assets/login/login_ct.png" alt="" />

      <div class="card">
        <img class="card-top-img" src="@/assets/login/card-top-img.png" alt="" />
        <!-- 统一的登录表单（内部自带 tab 切换） -->
        <!-- 建议 LoginForm 的 @forget 事件把当前手机号透传出来（可选） -->
        <LoginForm ref="loginRef" :loading="submitting" @submit="handleSubmit" @forget="openForgot" />
      </div>
    </div>
  </div>

  <!-- 通用密码弹窗：忘记密码场景 -->
  <PasswordResetDialog v-model="showForgot" scene="forgot" :mobile="forgotMobile" @success="onForgotSuccess" />
</template>

<script setup>
  import LoginForm from "./components/LoginForm.vue";
  import PasswordResetDialog from "./components/PasswordResetDialog.vue";
  import Local from "tools-utils/storage";
  import { initBackEndControlRoutes } from "@/router/backEndRoute";
  import { useUserInfoStore } from "@/store/modules/userInfo";
  import { NextLoading } from "@/utils/loading";

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserInfoStore();

  const submitting = ref(false);
  const loginRef = ref(null);

  /** 忘记密码弹窗控制 + 预填手机号 */
  const showForgot = ref(false);
  const forgotMobile = ref("");

  /** 登录提交 */
  async function handleSubmit(payload) {
    try {
      submitting.value = true;
      if (payload.mode === "pwd") {
        await userStore.LoginByPwd(payload);
      } else {
        await userStore.LoginByCode(payload);
      }
      $msg.success("登录成功");
      const isNoPower = await initBackEndControlRoutes();
      loginSuccess(isNoPower);
    } catch (e) {
      console.error("[Login] handleSubmit error", e);
      // 刷新登录表单图形码（若有）
      loginRef.value?.refreshCaptcha?.();
    } finally {
      submitting.value = false;
    }
  }

  /** 登录成功跳转 */
  function loginSuccess(isNoPower) {
    if (isNoPower) {
      $msg.warning("抱歉，您没有登录权限");
      Local.clear();
      return;
    }
    if (route.query?.redirect) {
      router.push({
        path: route.query.redirect,
        query: Object.keys(route.query?.params || {}).length ? JSON.parse(route.query.params) : "",
      });
    } else {
      router.push("/");
    }
    NextLoading.start();
  }

  /** 打开忘记密码弹窗；尽量带上当前手机号 */
  function openForgot(mobileFromForm) {
    // forgotMobile.value = mobileFromForm || loginRef.value?.form?.mobile || "";
    forgotMobile.value = "";
    showForgot.value = true;
  }

  /** 重置成功后：刷新登录图形码、回填手机号（可选） */
  function onForgotSuccess({ mobile }) {
    loginRef.value?.refreshCaptcha?.();
    loginRef.value?.setMobile?.(mobile); // 若 LoginForm 暴露了 setMobile，可回填
  }
</script>

<style lang="scss" scoped>
  img,
  svg {
    -webkit-user-drag: none;
    user-select: none;
  }

  .stage {
    min-width: 1440px;
    min-height: 900px;
    overflow: auto !important;
    width: 100vw;
    height: 100%;
    display: grid;
    place-items: center;
    background-image: url("@/assets/login/login_bg.jpg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .canvas {
    position: relative;
    aspect-ratio: 16 / 10;
    width: max(1440px, min(100vw, 160vh));
    height: max(900px, calc((min(100vw, 160vh)) / 16 * 10));
  }
  .welcome {
    position: absolute;
    left: 8.333%;
    top: 6.222%;
    height: 7.111%;
    color: var(--ct1);
    font-weight: 600;
    font-size: clamp(32px, 2.22vw, 40px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    .logo {
      width: calc(72 / 460 * 100%);
      height: auto;
      aspect-ratio: 1;
      object-fit: contain;
    }
  }
  .illust {
    position: absolute;
    left: 6.25%;
    top: 23%;
    width: 44.444%;
    height: auto;
  }
  .card {
    position: absolute;
    right: 11.11%;
    top: 27%;
    width: 400px;
    height: 453px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 24px 0 #0000000d;
    border: 1px solid #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .card-top-img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      width: 100%;
      height: 16.78%;
      object-fit: cover;
    }
  }
</style>
